<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8"/>
  <title>Calcite + ArcGIS 地图示例</title>

  <!-- ArcGIS Maps SDK for JavaScript -->
  <link rel="stylesheet" href="https://js.arcgis.com/4.33/esri/themes/light/main.css"/>
  <script src="https://js.arcgis.com/4.33/"></script>

  <!-- Calcite Design System -->
  <script type="module" src="https://js.arcgis.com/calcite-components/3.2.1/calcite.esm.js"></script>
  <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/3.2.1/calcite.css"/>

  <!-- 自定义样式 -->
  <link rel="stylesheet" href="styles.css"/>
</head>
<body>
  <!-- 标题栏 -->
  <div class="header-bar">
    <div class="header-title-section">
      <h1 class="header-title">地理信息管理系统</h1>
      <p class="header-subtitle">基于 Calcite Design System & ArcGIS</p>
    </div>

    <div class="header-actions">
      <!-- 主题选择器 -->
      <calcite-label>
        <calcite-select id="theme-select" placeholder="选择主题" style="width: 150px;">
          <calcite-option value="light" selected>浅色主题</calcite-option>
          <calcite-option value="dark">深色主题</calcite-option>
          <calcite-option value="blue">蓝色主题</calcite-option>
          <calcite-option value="green">绿色主题</calcite-option>
        </calcite-select>
      </calcite-label>
    </div>
  </div>

  <div class="main-container">
    <!-- 左侧菜单面板 -->
    <div class="left-panel" id="leftPanel">
      <!-- 折叠按钮 -->
      <div class="collapse-btn" id="collapseBtn" onclick="togglePanel()">
        <calcite-icon icon="chevron-left"></calcite-icon>
      </div>

      <!-- 面板头部 -->
      <div class="panel-header">
        <h2>地图控制面板</h2>
      </div>

      <!-- 菜单内容 -->
      <div class="menu-content">
        <!-- 三级菜单示例 -->
        <div class="menu-section">
          <h3>功能菜单</h3>
          <calcite-accordion>
            <!-- 一级菜单：数据管理 -->
            <calcite-accordion-item heading="数据管理" icon="database" expanded>
              <calcite-tree>
                <!-- 二级菜单：数据导入 -->
                <calcite-tree-item>
                  <calcite-icon icon="upload" slot="action"></calcite-icon>
                  数据导入
                  <!-- 三级菜单：具体格式 -->
                  <calcite-tree slot="children">
                    <calcite-tree-item onclick="alert('导入 Shapefile')">Shapefile</calcite-tree-item>
                    <calcite-tree-item onclick="alert('导入 GeoJSON')">GeoJSON</calcite-tree-item>
                    <calcite-tree-item onclick="alert('导入 KML')">KML</calcite-tree-item>
                    <calcite-tree-item onclick="alert('导入 CSV')">CSV</calcite-tree-item>
                  </calcite-tree>
                </calcite-tree-item>

                <!-- 二级菜单：数据导出 -->
                <calcite-tree-item>
                  <calcite-icon icon="download" slot="action"></calcite-icon>
                  数据导出
                  <!-- 三级菜单：导出格式 -->
                  <calcite-tree slot="children">
                    <calcite-tree-item onclick="alert('导出为 Shapefile')">导出 Shapefile</calcite-tree-item>
                    <calcite-tree-item onclick="alert('导出为 GeoJSON')">导出 GeoJSON</calcite-tree-item>
                    <calcite-tree-item onclick="alert('导出为 KML')">导出 KML</calcite-tree-item>
                    <calcite-tree-item onclick="alert('导出为 Excel')">导出 Excel</calcite-tree-item>
                  </calcite-tree>
                </calcite-tree-item>

                <!-- 二级菜单：数据查询 -->
                <calcite-tree-item>
                  <calcite-icon icon="search" slot="action"></calcite-icon>
                  数据查询
                  <!-- 三级菜单：查询类型 -->
                  <calcite-tree slot="children">
                    <calcite-tree-item onclick="alert('属性查询')">属性查询</calcite-tree-item>
                    <calcite-tree-item onclick="alert('空间查询')">空间查询</calcite-tree-item>
                    <calcite-tree-item onclick="alert('SQL 查询')">SQL 查询</calcite-tree-item>
                    <calcite-tree-item onclick="alert('模糊查询')">模糊查询</calcite-tree-item>
                  </calcite-tree>
                </calcite-tree-item>
              </calcite-tree>
            </calcite-accordion-item>

            <!-- 一级菜单：地图工具 -->
            <calcite-accordion-item heading="地图工具" icon="map">
              <calcite-tree>
                <!-- 二级菜单：测量工具 -->
                <calcite-tree-item>
                  <calcite-icon icon="measure" slot="action"></calcite-icon>
                  测量工具
                  <!-- 三级菜单：测量功能 -->
                  <calcite-tree slot="children">
                    <calcite-tree-item onclick="alert('距离测量')">距离测量</calcite-tree-item>
                    <calcite-tree-item onclick="alert('面积测量')">面积测量</calcite-tree-item>
                    <calcite-tree-item onclick="alert('角度测量')">角度测量</calcite-tree-item>
                    <calcite-tree-item onclick="alert('坐标查询')">坐标查询</calcite-tree-item>
                  </calcite-tree>
                </calcite-tree-item>

                <!-- 二级菜单：绘制工具 -->
                <calcite-tree-item>
                  <calcite-icon icon="pencil" slot="action"></calcite-icon>
                  绘制工具
                  <!-- 三级菜单：绘制类型 -->
                  <calcite-tree slot="children">
                    <calcite-tree-item onclick="alert('绘制点')">绘制点</calcite-tree-item>
                    <calcite-tree-item onclick="alert('绘制线')">绘制线</calcite-tree-item>
                    <calcite-tree-item onclick="alert('绘制面')">绘制面</calcite-tree-item>
                    <calcite-tree-item onclick="alert('绘制圆')">绘制圆</calcite-tree-item>
                  </calcite-tree>
                </calcite-tree-item>
              </calcite-tree>
            </calcite-accordion-item>

            <!-- 一级菜单：系统设置 -->
            <calcite-accordion-item heading="系统设置" icon="gear">
              <calcite-tree>
                <!-- 二级菜单：用户管理 -->
                <calcite-tree-item>
                  <calcite-icon icon="user" slot="action"></calcite-icon>
                  用户管理
                  <!-- 三级菜单：用户操作 -->
                  <calcite-tree slot="children">
                    <calcite-tree-item onclick="alert('添加用户')">添加用户</calcite-tree-item>
                    <calcite-tree-item onclick="alert('编辑用户')">编辑用户</calcite-tree-item>
                    <calcite-tree-item onclick="alert('删除用户')">删除用户</calcite-tree-item>
                    <calcite-tree-item onclick="alert('权限设置')">权限设置</calcite-tree-item>
                  </calcite-tree>
                </calcite-tree-item>

                <!-- 二级菜单：系统配置 -->
                <calcite-tree-item>
                  <calcite-icon icon="settings" slot="action"></calcite-icon>
                  系统配置
                  <!-- 三级菜单：配置项 -->
                  <calcite-tree slot="children">
                    <calcite-tree-item onclick="alert('界面设置')">界面设置</calcite-tree-item>
                    <calcite-tree-item onclick="alert('数据源配置')">数据源配置</calcite-tree-item>
                    <calcite-tree-item onclick="alert('地图配置')">地图配置</calcite-tree-item>
                    <calcite-tree-item onclick="alert('备份恢复')">备份恢复</calcite-tree-item>
                  </calcite-tree>
                </calcite-tree-item>
              </calcite-tree>
            </calcite-accordion-item>
          </calcite-accordion>
        </div>

        <!-- 图层控制 -->
        <div class="menu-section">
          <h3>图层控制</h3>
          <div class="layer-control">
            <span>道路图层</span>
            <calcite-switch id="roads-switch" checked></calcite-switch>
          </div>
          <div class="layer-control">
            <span>建筑物图层</span>
            <calcite-switch id="buildings-switch" checked></calcite-switch>
          </div>
          <div class="layer-control">
            <span>公园绿地</span>
            <calcite-switch id="parks-switch"></calcite-switch>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧地图容器 -->
    <div class="right-panel">
      <div id="viewDiv"></div>

      <!-- 底图选择器 -->
      <div class="basemap-selector">
        <calcite-label>
          <calcite-select id="basemap-select" placeholder="选择底图" style="width: 180px;">
            <calcite-option value="streets-vector" selected>街道矢量</calcite-option>
            <calcite-option value="satellite">卫星影像</calcite-option>
            <calcite-option value="hybrid">卫星混合</calcite-option>
            <calcite-option value="terrain">地形图</calcite-option>
            <calcite-option value="topo-vector">地形矢量</calcite-option>
            <calcite-option value="gray-vector">灰色矢量</calcite-option>
            <calcite-option value="dark-gray-vector">深灰矢量</calcite-option>
            <calcite-option value="oceans">海洋图</calcite-option>
            <calcite-option value="osm">OpenStreetMap</calcite-option>
            <calcite-option value="national-geographic">国家地理</calcite-option>
          </calcite-select>
        </calcite-label>
      </div>
    </div>
  </div>

  <!-- 引入JavaScript文件 -->
  <script src="script.js"></script>
</body>
</html>
